<template>
  <div class="app">
    <div class="navbar">
      <van-nav-bar
        fixed
        placeholder
        safe-area-inset-top
        title="分享"
        left-arrow
        @click-left="back"
      />
    </div>
    <div>
      <img src="../../assets/shared.png" alt="" width="100%">
    </div>
    <button class="btn" @click="goRule">活动规则</button>
    <img class="img" src="@/assets/button2.png" alt="" @click="help">
    <div class="input">
      <input
        v-model="phone"
        type="number"
        placeholder="注册手机号"
        @blur="checkPhone"
      >
      <input v-model="code" type="text" placeholder="验证码" maxlength="5">
      <div @click="getDxCode">获取验证码</div>
    </div>
    <van-popup v-model="show" class="pop" closeable>
      <div>助力成功</div>
      <div>积分奖励已发放，下载APP找心仪好房</div>
      <button @click="experience">立即体验</button>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getCode } from '@/apis/login'
export default {
  data() {
    return {
      phone: '',
      code: '',
      show: false
    }
  },
  methods: {
    getDxCode() {
      if (this.checkPhone) {
        getCode({
          mobile: this.phone,
          type: 1
        }).then((res) => {
          // console.log(res)
          if (res.code === 200) {
            Toast('验证码已发送，请注意查看')
          }
        })
      }
    },
    experience() {
      console.log('立即体验')
    },
    help() {
      this.show = true
    },
    back() {
      this.$router.go(-1)
    },
    checkPhone() {
      const reg = /^1[3-9]\d{9}$/
      if (!reg.test(this.phone)) {
        Toast('手机格式有误，请检查后重新输入')
        this.phone = ''
      } else {
        return true
      }
    },
    goRule() {
      this.$router.push('/ruletwo')
    }
  }
}
</script>

<style lang="less" scoped>
.pop {
  width: 300px;
  height: 190px;
  text-align: center;
  & > div:nth-child(1) {
    font-size: 15px;
    color: #333333;
    font-weight: bolder;
    margin-top: 29px;
    margin-bottom: 40px;
  }
  & > div:nth-child(2) {
    margin-bottom: 30px;
    font-size: 15px;
    font-weight: bold;
  }
  button {
    background-color: #ff9b33;
    border-radius: 17px;
    color: #fff;
    border: 0;
    width: 95px;
    height: 34px;
    font-size: 14px;
  }
}
.app {
  position: relative;
}
input::-webkit-input-placeholder {
  color: #fff;
  font-weight: bold;
}
.btn {
  background-image: linear-gradient(#fcc40edc, #fdc731);
  border: 0;
  font-size: 15px;
  color: rgb(255, 0, 0);
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 150px;
  width: 25%;
  padding: 5px;
  border-radius: 25px;
  box-shadow: 2px 2px 2px #ee5040;
}
.img {
  width: 88%;
  position: absolute;
  bottom: 25px;
  left: 5%;
}
.input {
  position: absolute;
  bottom: 40vw;
  left: 9.3vw;
  div {
    position: absolute;
    right: 18.6vw;
    bottom: 2.6vw;
    color: #fff;
    font-weight: bold;
  }
  input {
    width: 81.3vw;
    height: 11.2vw;
    border: 0;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 0 8.8vw;
    background-color: #fa776d;
    color: #fff;
  }
  input:nth-child(1) {
    margin-bottom: 15px;
  }
  input:nth-child(2) {
    position: relative;
  }
}
</style>
